<template>
  <div class="form">
    <div class="title">返场信息</div>
    <el-form ref="form"
             :model="form"
             :disabled="seeFlag"
             label-width="120px"
             size="small"
             inline
             label-suffix="："
             :rules="rules">
             <!-- @change="getWork" -->
      <el-form-item label="返场码头"
                    prop="termCode">
        <el-select v-model="form.termCode"
                   
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
           <el-option  :label="item.cnName" :value="item.termCode"  v-for="item,index in termList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船名航次"
                    prop="voyId">
        <el-tooltip :content="form.voyName"
                      placement="bottom"
                      popper-class="testtooltip" v-if="seeFlag">
                  <el-select v-model="form.voyId"
                   placeholder="搜索查询更多"
                   clearable
                   filterable
                   remote
                   :remote-method="remoteMethod"
                   size="small"
                   style="width:150px">
                    <!-- +item.iefg -->
                    <el-option :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')"
                              :value="item.id"
                              v-for="item,index in shipNo"
                              :key="index"></el-option>
                  </el-select>
         </el-tooltip>
        <el-select v-model="form.voyId"
                   placeholder="搜索查询更多"
                   clearable
                   filterable
                   size="small"
                   remote
                   :remote-method="remoteMethod"
                   style="width:150px"
                   v-else>
          <!-- +item.iefg -->
          <el-option :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')"
                              :value="item.id"
                              v-for="item,index in shipNo"
                              :key="index"></el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="提单号"
                    prop="billNo">
        <el-input v-model="form.billNo"
                  placeholder="请输入"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="货名"
                    prop="gname">
        <el-input v-model="form.gname"
                  placeholder="请输入"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="卸货港"
                    prop="potUnldPort">
        <el-select clearable
                   style="width: 150px"
                   size="small"
                   v-model="form.potUnldPort"
                   placeholder="请选择卸货港">
              <el-option :label="item.portlocnnm"
                     :value="item.portcd"
                     v-for="item,index in dataList.ports"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="铅封号"
                    prop="sealnos">
        <el-input v-model="form.sealnos"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="目的港"
                    prop="potDstPort">
        <el-select clearable
                   style="width: 150px"
                   size="small"
                   v-model="form.potDstPort"
                   placeholder="请选择目的港">
              <el-option :label="item.portlocnnm"
                     :value="item.portcd"
                     v-for="item,index in dataList.ports"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="货总重（吨）"
                    prop="gtWg">
        <el-input v-model="form.gtWg"
                  placeholder="请输入（吨）"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="总件数"
                    prop="gtPks">
        <el-input v-model="form.gtPks"
                  placeholder="请输入"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="总体积"
                    prop="gtVol">
        <el-input v-model="form.gtVol"
                  placeholder="请输入（立方米）"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="货主单位"
                    prop="consignor">
        <el-select v-model="form.consignor"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
          <el-option v-for="item in dataList.hz"
                     :key="item.customerCode"
                     :label="item.name"
                     :value="item.customerCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="货物代理"
                    prop="goodsAgencye">
        <el-select v-model="form.goodsAgency"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
          <el-option v-for="item in dataList.hd"
                     :key="item.customerCode"
                     :label="item.name"
                     :value="item.customerCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="危类代码"
                    prop="dtpDnggCd">
        <el-select clearable
                   style="width: 150px"
                   size="small"
                   v-model="form.dtpDnggCd"
                   placeholder="请选择危险类代码">
          <el-option :label="item.dnggnm"
                     :value="item.dnggcd"
                     v-for="item,index in dataList.danger"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="温度单位"
                    prop="tmptUnit">
        <el-select clearable
                   style="width: 150px"
                   size="small"
                   v-model="form.tmptUnit"
                   placeholder="请选择温度单位">
          <el-option :label="item.meaning"
                     :value="item.lowValue"
                     v-for="item,index in dataList.TMPT_UNIT"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="温度"
                    prop="setTmpt">
        <el-input v-model="form.setTmpt"
                  placeholder="请输入"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="联合国编号"
                    prop="unno">
        <el-select clearable
                   style="width: 150px"
                   size="small"
                   v-model="form.unno"
                   placeholder="请选择联合国编号">
          <el-option :label="item.unno"
                     :value="item.unno"
                     v-for="item,index in dataList.union"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'backInfoForm2',
  components: {},
  data() {
    return {
      form: {},
      rules: {
        termCode: [
          { required: true, message: '请选择返厂码头', trigger: 'change' },
        ],
        voyId: [
          { required: true, message: '请选择船名航次', trigger: 'change' },
        ],
        billNo: [{ required: true, message: '请输入提单号', trigger: 'blur' }],
        gname: [{ required: true, message: '请输入货名', trigger: 'blur' }],
        potUnldPort: [
          { required: true, message: '请选择卸货港', trigger: 'change' },
        ],
        potDstPort: [
          { required: true, message: '请选择目的港', trigger: 'change' },
        ],
      },
      dataList: {},
      form1: {},
      shipNo:[],
      termList:[],
    }
  },
 props:{
    seeFlag:{
      default:false
    },
    planTag:{
      default:null,
    },
  },
  watch:{
    form(){
      if(this.form.id){
        this.voyId(this.form.voyId)
      }
    }
  },
  methods: {
    voyId(id){
      console.log(99999)
      this.shipNo.forEach(item=>{
        if(id===item.id){
          this.form.voyName=item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')
        }
      })
    },
    remoteMethod(val = ''){
      this.$api.voyagesVslVoy({
        termCode:this.form.termCode || '',//码头编码
        schedulesType:'CONTAINER',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:this.$route.name == 'emptyHeavyNoNum'?'':'',//进出口 进口I,出口E
        something:val,//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
        console.log(555)
        console.log(this.form)
        
        if(this.form.id){
          this.voyId(this.form.voyId)
        }
      }).catch()
    },
    getDate() {
      this.dataList = {
        INTERNALFG_IM: [],
        OVER_LMT_CD: [],
        DIRTYCD: [],
        ADDTIONALOPERATE: [],
        cus: [],
        boxSize: [],
        ports: [],
        hz: [],
        hd: [],
        danger: [],
        union: [],
      }
      //boxSize 箱型
      //cus 持箱人
      //shipNo 航名
      //INTERNALFG_IM 贸易类型
      //DIRTYCD 坏/污
      //ADDTIONALOPERATE 附加操作
      this.$api.term().then(res => {
					this.termList = res.data.data
			})
      this.$api.refCode({
        domain: 'TMPT_UNIT',
      }).then((res) => {
        this.dataList.TMPT_UNIT = res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.getDangerUnionno().then((res) => {
        this.dataList.union = res.data
      }).catch()

//======================================

      // this.$api.voyagesPage({
      //   planTagExt:this.planTag,
      //   //termCode: 'HX',
      //   size: 999,
      //   current: 0,
      // }).then((res) => {
      //   this.shipNo = res.data.records
      //   console.log(555)
      //   console.log(this.form)
        
      //   if(this.form.id){
      //     this.voyId(this.form.voyId)
      //   }
      // }).catch()
      this.$api.voyagesVslVoy({
        termCode:this.form.termCode || '',//码头编码
        schedulesType:'CONTAINER',//件散货BULK_CARGO，集装箱CONTAINER
        iefg:this.$route.name == 'emptyHeavyNoNum'?'':'',//进出口 进口I,出口E
        something:'',//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
        console.log(555)
        console.log(this.form)
        
        if(this.form.id){
          this.voyId(this.form.voyId)
        }
      }).catch()
//======================================================

      this.$api.dangerCode().then((res) => {
        this.dataList.danger = res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.port().then((res) => {
        this.dataList.ports = res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.customerByType({
        tenantTypeName: '货主',
      }).then((res) => {
        this.dataList.hz = res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.customerByType({
        tenantTypeName: '货代',
      }).then((res) => {
        this.dataList.hd = res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.getCustomerRelations({
        //termCode: 'HX',
      }).then((res) => {
        this.dataList.cstCoperList = res.data
        this.$forceUpdate()
      }).catch()
      this.$api.containerTypeSizeInfo().then((res) => {
        this.dataList.boxList = res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain: 'DIRTYCD',
      }).then((res) => {
        this.dataList.DIRTYCD = res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain: 'INTERNALFG_IM',
      }).then((res) => {
        this.dataList.INTERNALFG_IM = res.data.data
        this.$forceUpdate()
      }).catch()
    },
  },

  computed: {},

  mounted() {
    this.getDate()
  },
}
</script>
<style lang='less' scoped>
.form {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  .title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 16px;
    border-left: 5px solid #0f47b8;
    line-height: 16px;
    padding-left: 8px;
    margin-bottom: 25px;
  }
}
</style>